<template>
  <div class="cart">
    <TipsVue></TipsVue>

    <div  v-if="cartList.length>0" style="overflow-y:scroll;height:calc(100vh - 160px);">
      <van-checkbox-group v-model="selectList" ref="checkboxGroup">
      <van-checkbox v-for="(item,index) in cartList" :key="index" :name="item.id" @click="watchSelectAll">
        <van-swipe-cell>
          <van-card num="1" :price="item.price" :desc="item.represent" :title="item.goodsName" class="goods-card"
            :thumb="$baseUrl + item.pic" />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)" />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    </div>

    <div class="none" v-else>
      <img src="../assets/img/empy/暂无数据.png" alt="" style="width:100%;">
      <div class="button" @click="$router.push('/')">前去商城逛逛</div>
    </div>

    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit" style="margin-bottom:50px;">
      <van-checkbox v-model="checked" :disabled="!(cartList.length>0)" @change="checkAll">全选</van-checkbox>
      <template #tip>
        查看地址信息是否正确, <span @click="$router.push('/address')">点击可修改地址</span>
      </template>
    </van-submit-bar>

  </div>
</template>

<script>
import { selectGoodsByCart, addUpdate ,addOrder,pay} from '../request/api.js'
import TipsVue from '../components/productDetail/Tips.vue';
export default {
  components: {
    TipsVue
  },
  data() {
    return ({
      checked: false,
      result: false,
      selectList: [],
      cartList: []
    })
  },
  computed: {
    totalPrice() {
      let total = 0
      if (this.cartList.length > 0) {
        this.cartList.forEach(item => {
          this.selectList.forEach(iitem => {
            if (iitem == item.id) total += item.price * 100
          })
        })
      }
      return total
    }
  },
  mounted() {
      this.getAll()
  },
  methods: {
    checkAll(){
      if(this.cartList.length==0) return
      this.$refs.checkboxGroup.toggleAll(this.checked)
    },
    getAll(){
      selectGoodsByCart({ id: localStorage.getItem('userId') }).then(res => {
        this.cartList = res.data
        this.$store.state.cartListLength = res.data.length || 0
      }).catch(res=>{
      })
    },
    onSubmit() {
      let price = this.totalPrice/100
      if(this.selectList.length>0){
        let goodsIdList = []
        this.selectList.forEach(iitem=>{
          this.cartList.forEach((item,index)=>{
            if(iitem==item.id){
              goodsIdList.push(item.id)
              this.cartList.splice(index,1)
            }
          })
        })
        let userId = localStorage.getItem('userId')
        let data = {
          userId,
          status:0,
          goodsIdList:JSON.stringify(goodsIdList),
          goodsId:null
        }
        pay({userId,price}).then(res=>{
          if(res.data){
            this.$toast.success(res.message)
          addOrder(data).then(res=>{
            let cartInfo = []
            if(this.cartList.length>0){
              this.cartList.forEach(item=>{
                cartInfo.push(item.id)
              })
              cartInfo = JSON.stringify(cartInfo)
            }else cartInfo = '[]'
            addUpdate({userId,cartInfo}).then(res=>{
              this.checked = false
              this.getAll()
            })
          })
          }else{
            this.$dialog.confirm({
              title:'余额不足',
              message:'前去充值!'
            }).then(()=>{
              this.$router.push('/recharge')
            }).catch(()=>{
              this.getAll()
            })
          }
        })
      }else{
        this.$toast.fail('您还未选择商品')
      }
    },
    onClickEditAddress() {

    },
    watchSelectAll() {
      if (this.selectList.length == this.cartList.length) this.checked = true
      else this.checked = false
    },
    del(id) {
      this.$store.state.cartList.forEach((item, index) => {
        if (item == id) this.$store.state.cartList.splice(index, 1)
      })
      addUpdate({
        userId: localStorage.getItem('userId'),
        cartInfo: JSON.stringify(this.$store.state.cartList)
      }).then(res => {
        this.$toast.success(res.data)
        selectGoodsByCart({ id:localStorage.getItem('userId') }).then(res => {
          this.cartList = res.data
        })
      })
    }
  }
}
</script>

<style scoped>
    .button{
    height:40px;
    width:120px;
    background: orange;
    color: #fff;
    text-align: center;
    line-height: 40px;
    margin:0 auto;
  }
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}

.van-card__price {
  color: orangered;
}

.van-checkbox__label {
  flex: 1;
  padding: 0.05rem;
}

.van-checkbox {
  margin-left: 10px;
  margin-top: 10px;
}

.van-card {
  width: 85vw;
  background: white;
}

.van-card__title {
  font-size: 16px;
}

.delete-button {
  height: 100%;
}

.van-stepper {
  z-index: 9999;
  text-align: right !important;
}
</style>